<template>
  <div class="box col-wrapper">
    <div class="head">
    </div>
    <div class="message">
      <div class="bond1"></div>
    </div>
    <div class="message">
      <div class="bond2"></div>
    </div>
    <div class="message">
      <div class="bond3"></div>
    </div>
  </div>
</template>
<script>
import '@/styles/flax.css'
export default {
}
</script>
<style scoped lang="scss">
.box {
  height: 944px;
  .head {
    align-self: flex-start;
    width: 614px;
    height: 131px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
  }

  .message {
    width: 614px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
  }
}
.bond1{
  height: 165px;
}
.bond2{
  height: 467px;
}
.bond3{
  height: 151px;
}
</style>
